<template>
    <div class="OnlineRes">
        <div class="breadcrumb">审核管理- 人才信息审核 - 待审核- {{rowInfo.name}}</div>
        <div class="mes">
            <p>
                <span style="font-size: 18px">{{rowInfo.name}}</span>
                <span>{{rowInfo.phone}}</span>
            </p>
            <p>
                <span v-if="rowInfo.content">{{rowInfo.content}}</span>
                <span>{{rowInfo.jobState}}</span>
                <span>{{rowInfo.rdtime}}</span>
            </p>
            <div class="right">
                <button @click="doAudit(2)" v-if="hiddenKeys1">异常</button>
                <button @click="doAudit(1)" v-if="hiddenKeys2">通过</button>
            </div>
        </div>
        <div class="maincontain">
            <div class="btn">
                <button
                        :class="['graybtn',{'bluebtn':item.isactive}]"
                        v-for="(item,value) in btnlist"
                        :key="value"
                        @click="getmsg(value)"
                >{{item.name}}
                </button>
            </div>
            <!--在线简历-->
            <div v-if="btnlist[1].isactive">
                <div class="Resume">
                    <div class="userImg">
                        <img :src="userImg" alt>
                    </div>
                    <div class="userInfo">
                        <div class="age">
                            <div class="userSize">{{sbt.name}}</div>
                            <div class="userS">{{sbt.jobState}}</div>
                        </div>
                        <div class="age marginT">
                            <div class="age">
                                <div class="icon margin"></div>&nbsp;
                                <div>{{sbt.age?sbt.age+' 岁':''}}</div>
                                <div class="empty"></div>
                            </div>
                            <div class="age margin1">
                                <div class="icon_experience margin"></div>&nbsp;
                                <div>{{sbt.workDay?sbt.workDay+' 年经验':''}}</div>
                                <div class="empty"></div>
                            </div>
                            <div class="age margin1">
                                <div class="icon_positioning margin"></div>&nbsp;
                                <div>{{sbt.city}}</div>
                                <div class="empty"></div>
                            </div>
                            <div class="age margin1">
                                <div class="icon_salary margin"></div>&nbsp;
                                <div>{{sbt.tax==0?'税前':'税后'}} {{sbt.salaryPerMonth}}W/{{sbt.monthCount}}年</div>
                            </div>
                        </div>
                        <div class="age marginT">
                            <div class="age">
                                <div class="icon_tel margin"></div>&nbsp;
                                <div>{{sbt.phone}}</div>
                            </div>
                            <div class="empty"></div>
                            <div class="age margin1">
                                <div class="icon_email margin"></div>&nbsp;
                                <div>{{sbt.email}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--期望职位-->
                <div class="jobs">
                    <div class="age">
                        <div class="empty1 marginR"></div>
                        <div class="header">期望职位</div>
                        <div class="bitian">必填</div>
                    </div>
                    <div class="age marginT1" v-for="item in sbt.hopeJob">
                        <div class="age">
                            <div class="icon_positioning margin"></div>&nbsp;
                            <div>{{item.hopeCity}}</div>
                        </div>
                        <div class="age margin1">
                            <div class="icon_practice margin"></div>&nbsp;
                            <div>{{item.hopeLicenseStr}}</div>
                        </div>
                        <div class="age margin1">
                            <div class="icon_enter_type margin"></div>&nbsp;
                            <div>{{item.hopeCompanyTypeStr}}</div>
                        </div>
                        <div class="age margin1">
                            <div class="icon_salary1 margin"></div>&nbsp;
                            <div>{{item.taxType==0?'税前':'税后'}}
                                {{item.salaryPerMonthLow+'-'+item.salaryPerMonthHigh}}W/{{item.yearNum}}年
                            </div>
                        </div>
                    </div>
                </div>
                <!--工作经历-->
                <div class="Work">
                    <div class="age marginT2">
                        <div class="empty1 marginR"></div>
                        <div class="header">工作经历</div>
                        <div class="bitian">必填</div>
                    </div>
                    <div v-for="item in sbt.jobExperiences">
                        <div>
                            <div class="age marginT30 m_l_10">
                                <div class="marginR1 company">{{item.companyName}}</div>
                                <div class="workTime">{{item.jobStartTime}} / {{item.jobEndTime}}</div>
                            </div>
                        </div>
                        <div class="age marginT m_l_10">
                            <div class="age">
                                <div>{{item.jobName}}</div>
                                <div class="empty"></div>
                            </div>
                            <div class="age margin1">
                                <div>{{item.licenseTypeStr}}</div>
                                <div class="empty"></div>
                            </div>
                            <div class="age margin1">
                                <div>{{item.companyTypeStr}}</div>
                                <div class="empty"></div>
                            </div>
                            <div class="age margin1">
                                <div>{{item.workCity}}</div>
                            </div>
                        </div>
                        <div class="WorkCont m_l_10" v-html="item.jobContent"></div>
                    </div>
                </div>
                <!-- 项目 -->
                <div class="Work">
                    <div class="age marginT2">
                        <div class="empty1 marginR"></div>
                        <div class="header">项目经历</div>
                        <div class="bitian">必填</div>
                    </div>
                    <div v-for="item in sbt.projectExperience">
                        <div>
                            <div class="age marginT30 m_l_10">
                                <div class="marginR1 company">{{item.projectName}}</div>
                                <div class="workTime">{{item.projectStartTime}} / {{item.projectEndTime}}</div>
                            </div>
                        </div>
                        <div class="WorkCont m_l_10" v-html="item.projectContent"></div>
                    </div>
                </div>
                <!-- 执业证书 -->
                <div class="Work">
                    <div class="age marginT2">
                        <div class="empty1 marginR"></div>
                        <div class="header">执业证书</div>
                        <div class="bitian">必填</div>
                    </div>
                    <div class="age marginT30 m_l_10" v-for="item in sbt.licenses">
                        <div class="marginR1 company">{{item.licenseType}}</div>
                        <div class="major">{{item.licenseNum}}</div>
                    </div>
                </div>
                <!-- 教育经历 -->
                <div class="Work">
                    <div class="age marginT2">
                        <div class="empty1 marginR"></div>
                        <div class="header">教育经历</div>
                        <div class="bitian">必填</div>
                    </div>
                    <div v-for="item in sbt.educationExperiences">
                        <div>
                            <div class="age marginT2 m_l_10">
                                <div class="marginR1 company">{{item.school}}</div>
                                <div class="workTime">{{item.startTime}} / {{item.endTime}}</div>
                            </div>
                        </div>
                        <div class="age marginT m_l_10">
                            <div class="age">
                                <div>{{item.major}}</div>
                                <div class="empty"></div>
                            </div>
                            <div class="age margin1">
                                <div>{{item.academicStr}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 职称 -->
                <div class="Work">
                    <div class="age marginT2">
                        <div class="empty1 marginR"></div>
                        <div class="header">职称</div>
                    </div>
                    <div class="age marginT30 m_l_10">
                        <div class="marginR1 company resume-tag">
                            <!-- {{sbt.title}} -->
                            <el-tag v-for="item in sbt.title">{{item}}</el-tag>
                        </div>
                    </div>
                </div>
            </div>
            <!--执业证书-->
            <div v-else class="certlist">
                <el-table
                        :header-cell-style="mystyle"
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column label="序号" align="center" type="index" min-width="80"></el-table-column>
                    <el-table-column prop="name" align="center" label="姓名"></el-table-column>
                    <el-table-column prop="licenseType" align="center" label="执业类型"></el-table-column>
                    <el-table-column prop="licenseNum" align="center" label="证书编号"></el-table-column>
                    <el-table-column prop="rdtime" align="center" label="提交时间"></el-table-column>
                </el-table>
                <!-- <p class="colred">最多三个最少一个，人才提交几个就显示几个</p> -->
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                userImg: "",
                // isactive:true,
                btnlist: [
                    {
                        name: '执业证书',
                        isactive: true
                    },
                    {
                        name: '人才简历',
                        isactive: false
                    }
                ],
                tableData: [
                    {
                        licenseName: '',
                        licenseType: '',
                        licenseNum: '',
                        ctime: ''
                    }
                ],
                hiddenKeys2: true,
                hiddenKeys1: true,
                butt2on: '',
                rowInfo: {},
                images: [],
                sbt: {},
                index: 0
            }
        },
        methods: {
            mystyle({row, column, rowIndex, columnIndex}) {
                console.log("row", rowIndex+","+columnIndex);
                if (rowIndex === 0 && columnIndex === 0) {
                    return "display: inline-block;width:50px;background:'rgba(247,249,252,.5)';color:#1F2E4D";
                } else {
                    return " background:'rgba(247,249,252,.5)',color:'#1F2E4D";
                }
            },
            doAudit(type) {
                this.lAxios({
                    method: 'post',
                    url: '/platform/auditTalentInfo.do',
                    params: {
                        //传参
                        talentID: this.rowInfo.id,
                        auditState: type
                    }
                }).then(res => {
                    console.log(res)
                    //成功
                    if (res.data.status == 0) {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        })
                        this.$router.push({
                            path: '/TalentReview',
                            query: {name: this.butt2on}
                        })
                    } else {
                    }
                })
                    .catch(err => {
                        //失败的回调函数
                        console.log(err)
                    })
            },
            getmsg(value) {
                this.btnlist.forEach(element => {
                    element.isactive = false
                })
                this.btnlist[value].isactive = true
                console.log(value)
                this.images = this.rowInfo.licenses
                this.lAxios({
                    method: 'post',
                    url: '/platform/getTalent.do',
                    params: {
                        id: this.rowInfo.id
                    }
                }).then(res => {
                    // console.log(res.data.data)
                    this.sbt = res.data.data;
                    if (res.data.data.title != null) {
                        this.sbt.title = res.data.data.title.split(',')
                    }
                    console.log("sbt", this.sbt)
                    this.userImg = this.sbt.image
                })
                if (value == 0) {
                    this.lAxios({
                        method: 'post',
                        url: '/platform/getLicense.do',
                        params: {
                            talentId: this.rowInfo.id
                        }
                    }).then(res => {
                        console.log(res.data.data)
                        this.tableData = res.data.data
                        console.log(this.tableData[0])
                        for (var i = 0; i < this.tableData.length; i++) {
                            console.log(this.tableData[i])
                            this.tableData.licenseNum = this.tableData[i].licenseNum
                            this.tableData.licenseType = this.tableData[i].licenseType
                            this.tableData.licenseName = this.tableData[i].licenseName
                            this.tableData.ctime = this.tableData[i].ctime
                        }
                    })
                }
            }
        },
        created() {
            this.butt2on = localStorage.getItem('chche_t')
            console.log("button", this.butt2on)
            if (this.butt2on == '审核通过') {
                this.hiddenKeys2 = false
            } else if (this.butt2on == '异常') {
                this.hiddenKeys1 = false
            }
            this.rowInfo = JSON.parse(localStorage.getItem('talent_rowInfo'))
            if (this.rowInfo.content.indexOf('<br>') != -1) {
                let ch = '<br>'
                let reg = '/' + ch + '/g'
                this.rowInfo.content = this.rowInfo.content.replace(eval(reg), '，')
                console.log('content', this.rowInfo.content)
            }
            this.getmsg(0)
            // //清空localStorage 域对象
            // localStorage.removeItem("button");
            // localStorage.removeItem("talent_rowInfo");
        }
    }
</script>

<style lang="scss">
    .resume-tag {
        .el-tag {
            width: auto;
            padding: 7px 20px;
            line-height: 15px;
            border: none;
            border-radius: 2px;
            background: #f3f3f7;
            color: #666;
            font-size: 13px;
            margin: 0 10px 10px 0;
        }
    }

    .OnlineRes {
        // position: relative;
        padding-left: 10px;

        .breadcrumb {
            margin: 10px 0;
            font-size: 14px;
            color: #333;
        }

        .mes {
            background-color: #fff;
            height: 60px;
            padding: 30px 50px;
            position: relative;

            p {
                font-size: 18px;
                font-weight: 600;
                line-height: 30px;

                span {
                    margin-right: 30px;
                    font-size: 16px;
                    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
                }
            }
        }

        .maincontain {
            margin-top: 10px;
            background-color: #fff;
            padding: 20px 50px;

            .btn {
                margin-bottom: 50px;
                display: flex;
                flex-direction: row;
                cursor: default;

                .graybtn {
                    margin-right: 20px;
                    width: 125px;
                    height: 50px;
                    line-height: 50px;
                    font-size: 16px;
                    text-align: center;
                    border: 1px solid rgb(230, 233, 252);
                    border-radius: 5px;
                    background-color: rgb(247, 249, 252);
                    color: #1f2e4d;
                }

                .bluebtn {
                    background-color: #37f;
                    color: #fff;
                }
            }

            .Resume {
                // margin-bottom: 60px;
                width: 700px;
                height: 167px;
                display: flex;
                flex-direction: row;

                .userImg {
                    width: 105px;
                    height: 105px;
                    margin-right: 20px;
                    // margin-top: 32px;
                    // margin-left: 30px;
                    img {
                        width: 100%;
                    }
                }

                .userInfo {
                    display: flex;
                    flex-direction: column;
                    text-align: left;
                }

                .userInfo > div {
                    margin-bottom: 10px;
                }
            }

            .age {
                display: flex;
                flex-direction: row;
                align-items: center;
                font-size: 14px;
                color: #666;

                .userS {
                    width: 144px;
                    height: 24px;
                    background-color: #4ab0cf;
                    border-radius: 10px 10px 10px 0px;
                    color: white;
                    line-height: 24px;
                    text-align: center;
                    margin-left: 10px;
                    // font-size: 14px;
                }

                .userSize {
                    font-size: 24px;
                    color: #333;
                    font-weight: bold;
                }

                .fs12 {
                    font-size: 12px;
                }
            }

            .jobs {
                display: flex;
                flex-direction: column;
            }

            .header {
                font-size: 18px;
                color: #333;
                font-weight: bold;
            }

            .bitian {
                margin-left: 10px;
                color: #dd3a31;
            }

            .company {
                font-size: 16px;
                color: #555;
                font-weight: bold;
            }

            .major {
                color: #333;
                font-size: 14px;
                font-weight: bold;
            }

            .icon {
                width: 16px;
                height: 16px;
                background: url('../../assets/img/communication/age.png') no-repeat;
                margin-top: 3px;
            }

            .icon_experience {
                width: 16px;
                height: 16px;
                background: url('../../assets/img/communication/experience.png') no-repeat;
                margin-top: 3px;
            }

            .icon_positioning {
                width: 15px;
                height: 16px;
                background: url('../../assets/img/communication/address.png') no-repeat;
                margin-top: 3px;
            }

            .icon_salary {
                width: 16px;
                height: 15px;
                background: url('../../assets/img/communication/salary.png') no-repeat;
                margin-top: 3px;
            }

            .icon_tel {
                width: 14px;
                height: 16px;
                background: url('../../assets/img/communication/tel.png') no-repeat;
                margin-top: 3px;
            }

            .icon_email {
                width: 16px;
                height: 16px;
                background: url('../../assets/img/communication/email.png') no-repeat;
                margin-top: 3px;
            }

            .icon_practice {
                width: 16px;
                height: 16px;
                background: url('../../assets/img/communication/practice.png') no-repeat;
                margin-top: 3px;
            }

            .icon_enter_type {
                width: 16px;
                height: 16px;
                background: url('../../assets/img/communication/enter_type.png') no-repeat;
                margin-top: 3px;
            }

            .icon_salary1 {
                width: 16px;
                height: 16px;
                background: url('../../assets/img/communication/salary1.png') no-repeat;
                margin-top: 3px;
            }

            .margin {
                margin-right: 5px;
            }

            .margin1 {
                margin-left: 29px;
            }

            .empty,
            .empty1 {
                width: 3px;
                height: 15px;
                background: #aaa;
                margin-left: 30px;
                // margin-top: 4px;
            }

            .empty1 {
                margin-left: 0;
                background-color: #f09338;
            }

            .marginT {
                margin-top: 13px;
            }

            .m_l_10 {
                margin-left: 12px;
            }

            .marginT1 {
                margin-top: 20px;
            }

            .marginT2 {
                margin-top: 40px;
            }

            .marginT30 {
                margin-top: 30px;
            }

            .marginR {
                margin-right: 10px;
            }

            .marginL {
                margin-left: 39px;
            }

            .marginL1 {
                margin-left: 50px;
            }

            .marginR1 {
                margin-right: 30px;
            }

            .Work {
                width: 100%;
                // height: 338px;
                display: flex;
                flex-direction: column;
            }

            .workTime {
                color: #999;
                font-size: 12px;
                margin-top: 3px;
            }

            .WorkCont {
                // width: 600px;
                // height: 161px;
                margin-top: 18px;
                /*border: 1px solid #999;*/
                font-size: 14px;
                word-wrap: break-word;
                word-break: break-all;
                overflow: hidden;
                color: #666;
                line-height: 20px;
                text-align: left;
            }

            .bottom {
                position: fixed;
                bottom: 0;
                left: 36.8%;
                width: 798px;
                height: 78px;
                font-size: 14px;
                background-color: #fbfbff;
            }

            .bottomR {
                margin-right: 20px;
            }

            .font {
                width: 379px;
                height: 20px;
                margin-top: 29px;
                margin-left: 51px;
                text-align: left;
            }

            .icon_green {
                width: 16px;
                height: 14px;
                background: url('../../assets/img/communication/invitation_green.jpg') no-repeat;
                margin-top: 3px;
                margin-right: 8px;
                z-index: 9;
            }

            .icon_gray,
            .icon_xiaoxi {
                width: 16px;
                height: 16px;
                background: url('../../assets/img/communication/fit_black.jpg') no-repeat;
                margin-top: 3px;
                margin-right: 8px;
                z-index: 9;
            }

            .icon_xiaoxi {
                background: url('../../assets/img/communication/xiaoxi_black.png') no-repeat;
            }

            .fontG {
                color: #009944;
            }

            .icon_position {
                position: absolute;
                right: 50px;
                bottom: 29px;
            }
        }

        // .certlist{
        //     .tab_header{
        //         th{
        //             background-color: #e6e9f0;
        //             text-align: center;
        //         }
        //     }
        //     .tableRow{
        //         td{
        //             text-align: center;
        //         }
        //     }
        //     .colred{
        //         margin-top: 30px;
        //         text-align: center;
        //         color: red;
        //         font-size: 14px;
        //     }
        // }
        .right {
            float: right;
        }

        .right > button {
            width: 125px;
            height: 50px;
            background: rgba(247, 249, 252, 0.8);
            color: #3377ff;
            border: 1px solid #3377ff;
            border-radius: 4px;
            font-size: 16px;
            position: absolute;
            top: 40px;
            right: 75px;
        }

        .right > button:nth-child(2) {
            position: absolute;
            top: 40px;
            right: 220px;
        }
    }
</style>
